import React from "react";
import { Menu } from 'antd';
import type { GetProp, MenuProps } from 'antd';

type MenuItem = GetProp<MenuProps, 'items'>[number];
const items: MenuItem[] = [
  {
    key: '1',
    icon: <img src="/src/img/01_03.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '精选推荐',
  },
  {
    key: '2',
    icon: <img src="/src/img/01_06.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '工作台',
  },
   {
    key: '3',
    icon: <img src="/src/img/01_08.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '创建设计',
  },
   {
    key: '4',
    icon: <img src="/src/img/01_10.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '偏好设置',
  },
   {
    key: '5',
    icon: <img src="/src/img/01_12.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '我的收藏',
  },
  {
    type:"group",
    label:<span style={{fontSize:"12px"}}>创意设计</span>,
    children:[
        {
    key: '6',
    icon: <img src="/src/img/01_14.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: 'H5',
  },
   {
    key: '7',
    icon: <img src="/src/img/01_16.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '海报',
  },
   {
    key: '8',
    icon: <img src="/src/img/01_18.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '长页',
  },
   {
    key: '9',
    icon: <img src="/src/img/01_20.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '表单',
  },
   {
    key: '10',
    icon: <img src="/src/img/01_22.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '互动',
  },
   {
    key: '11',
    icon: <img src="/src/img/01_24.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '电子画册',
  },
   {
    key: '12',
    icon: <img src="/src/img/01_26.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '视频',
  },
   {
    key: '13',
    icon: <img src="/src/img/01_28.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: 'AI创作',
  },
   {
    key: '14',
    icon: <img src="/src/img/02_03.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '数字人',
  },
  {
    key: '15',
    label: '作图工具',
    icon: <img src="/src/img/02_06.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    children: [
      { key: '16', label: '智能抠图' },
      { key: '17', label: '智能海报' },
      { key: '18', label: '拼图' },
      { key: '19', label: '图片美化' },
      { key: '20', label: '二维码美化' },
      { key: '21', label: '文字云' },
      { key: '22', label: '对话生成器' },
      { key: '23', label: '格式转换器' },
      { key: '24', label: '批量水印' },
    ],
  },
  {
    key: '25',
    label: '营销工具',
    icon: <img src="/src/img/02_08.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    children: [
      { key: '26', label: '短信通知' },
      { key: '27', label: '在线收款' },
      { key: '28', label: '获客活码' },
      { key: '29', label: '节日红包' },
      { key: '30', label: '个人主页' },
    ],
  },
    ]
  },
   
  {
    type:"group",
    label:<span style={{fontSize:"12px"}}>其他</span>,
    children:[
         {
    key: '31',
    icon: <img src="/src/img/02_10.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '案例中心',
  },
  {
    key: '32',
    icon: <img src="/src/img/02_12.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '正版素材',
  },
  {
    key: '33',
    icon: <img src="/src/img/02_14.jpg" alt="" style={{width:"20px",height:"20px"}}/>,
    label: '成为设计师',
  },
    ]
  },
 
];
function Sider() {
      const onClick:MenuProps["onClick"] = (e) => {
       console.log("click",e)
    }
    return (
        <div>
            <Menu
                style={{ width: 200 }}
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                mode='inline'
                onClick={onClick}
                items={items}
            />
        </div>
    )
}
export default Sider